
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../../system/sys_common_head.jsp"%>
    <title>Title</title>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">

            <div class="main-container">

                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">学生编号</label>
                    <div class="layui-input-block">
                        <input type="text" value="${id}" name="id" lay-verify="title"
                               autocomplete="off" placeholder="学生编号" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">缴费项目</label>
                    <div class="layui-input-block" id="jfItemDiv">
                    </div>
                </div>

                <div class="layui-form-item" id="inputJFDiv" style="line-height: 60px;">

                </div>

            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="role-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'jquery'], function () {


        let form = layui.form;
        let $ = layui.jquery;
        let itemJF = [
            {"name":"高级技工学校报名考试费","code":"360020005203"},
            {"name":"职业技能鉴定技师（国家二级）操作技能考核费","code":"360020001300"},
            {"name":"职业技能鉴定国家职业资格等级理论知识考试费（技工类）","code":"360020001289"},
            {"name":"职业技能鉴定初级工（国家五级）操作技能考核费	","code":"360020001292"},
            {"name":"高级技工学校学费","code":"360020002356"},
            {"name":"公办技师学院学费","code":"360020002357"},
            {"name":"公办技师学院住宿费（公寓4人间）","code":"360020002365"},
            {"name":"普通技工学校报名考试费","code":"360020002448"},
            {"name":"高级技工学校报名考试费","code":"360020002449"},
            {"name":"公办技师学院住宿费（普通10人间）","code":"360020002363"},
            {"name":"设区市职业中专公寓式宿舍住宿费","code":"360020002822"},
            {"name":"职业技能鉴定中级工（国家四级）操作技能考核费","code":"	360020001294"},
            {"name":"职业技能鉴定高级工（国家三级）操作技能考核费	","code":"360020001297"},
            {"name":"公办技师学院住宿费（公寓6人间）","code":"360020002364"},
            {"name":"公办技师学院实习实验费","code":"360020002446"},
            {"name":"公办技师学院报名考试费","code":"360020002450"},
            {"name":"高级技工学校住宿费","code":"360020002359"},
            {"name":"普通技工学校报名考试费","code":"360020005202"},
            {"name":"公办技师学院住宿费（普通8人间）","code":"360020002361"},
            {"name":"代收应转付高中及中等职业学校学生校服费（夏装）","code":"360020002481"},
            {"name":"代收应转付职工住房公积金","code":"360020001566"},
            {"name":"代收应转付高中及中等职业学校学生体检费","code":"360020001573"},
            {"name":"职业中专学费","code":"360020002807"},
            {"name":"普通技工学校工科、医药、交通类专业实习实验费	","code":"360020002444"},
            {"name":"公办技师学院报名考试费","code":"360020005204"},
            {"name":"代收应转付职工养老保险费","code":"360020001563"},
            {"name":"代收应转付高中及中等职业学校学生教科书费（含与教科书配套数字音像材料）","code":"360020001569"},
            {"name":"普通技工学校农林、服务、财经、管理类专业实习实验费","code":"360020002443"},
            {"name":"高级技工学校实习实验及实习材料费","code":"360020002445"},
            {"name":"公办技师学院住宿费（普通6人间）","code":"360020002362"},
            {"name":"普通技工学校学费","code":"360020002355"},
            {"name":"普通技工学校住宿费","code":"360020002358"}
        ];

        for(var i = 0;i < itemJF.length;i++){
            $("#jfItemDiv").append(' <input type="checkbox" name="itemJF" lay-filter="itemJF" value="'+itemJF[i].code+'" title="'+itemJF[i].name+'">')
        }

        form.render();
        form.on('checkbox(itemJF)', function(data){
            // console.log(data.elem); //得到checkbox原始DOM对象
            // console.log(data.elem.checked); //是否被选中，true或者false
            // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            // console.log(data.othis); //得到美化后的DOM对象
            var html = '';
            var checkBoxList = $("[type='checkbox']");
            for(var i = 0; i < checkBoxList.length; i++){

                if(checkBoxList[i].checked){
                    html+='<div class="layui-form-mid layui-word-aux">'+checkBoxList[i].title+'</div>' +
                        '<div class="layui-input-inline">' +
                        '<input type="number" name="'+checkBoxList[i].value+'" required lay-verify="required" placeholder="请输入'+checkBoxList[i].title+'" autocomplete="off" class="layui-input">' +
                        '</div> &nbsp;&nbsp;&nbsp;<br>';
                }
            }

            $("#inputJFDiv").html(html);
            form.render();

        });

        form.on('submit(role-save)', function (data) {
            $.ajax({
                url: '<%=request.getContextPath()%>/student/preregistration/billStudent',
                data: data.field,
                dataType: 'json',
                // contentType: 'application/json',
                type: 'put',
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("role-table");
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>

</body>
</html>